view {
    margin: 0px;
    padding: 0px;
}

page {
    
    height: 100%;
    position: relative;
    background: white;
   
}
#page{
    width:750rpx;
    height: 100%;
    overflow:hidden;
    position:relative;
}

#top {
    width: 100%;
    height:94rpx;
    position: relative;
    // .animation_vie {
    //     width: 750rpx;
    //     height: 230rpx;
    //     margin-top: 142rpx;
    //     margin-bottom: 100rpx;
    // } // box-shadow: 0px 1px rgba(170,170,170,1) ,0px 2px rgba(170,170,170,0.8),0px 3px rgba(170,170,170,0.6),0px 4px rgba(170,170,170,0.4);
}

#position {
    text-align: center;
    line-height: 58rpx;
    height: 58rpx;
    width: 408rpx;
    background: #f7f7f7;
    padding: 2px 0px;
    color: #333;
    font-size: 32rpx;
    margin-left: 171rpx;
    top: 36rpx;
    border-radius: 32rpx;
    position: relative;
    label {
        display: block;
        width: 80%;
        margin-left: 10%;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        
    }
}
#san_view {
    position:absolute;
    bottom: 0rpx;
    left:175rpx;
    border-radius: 200rpx;
    width: 400rpx;
    height: 400rpx;
    background-image: -webkit-radial-gradient(center, rgba(255, 239, 0, 0.6) 10%, rgba(255, 250, 179, 0.1) 75%, rgba(255, 255, 255, 0) 85%);
    #scanView {
        border-radius: 50%;
        color: #231815;
        font-size: 56rpx;
        position: relative;
        image {
            position: absolute;
            width: 77rpx;
            height: 66rpx;
            top: 66rpx;
            left: 111.5rpx;
        }
        span {
            width: 100%;
            text-align: center;
            position: absolute;
            display: block;
            top: 167rpx;
            font-size: 48rpx; // line-height: 2px;
        }
    }
}

#shopMarket {
    position: absolute;
    z-index: 99;
    width: 124rpx;
    height: 124rpx;
    bottom: 138rpx;
    right: 44rpx;
    color: #fff;
    image {
        width: 124rpx;
        height: 124rpx;
        z-index: 0;
    }
    label {
        display: inline-block;
        position: absolute;
        z-index: 9;
        left: 90rpx;
        top: 0px;
        line-height:36rpx;
        font-size:22rpx;
        width: 36rpx;
        height: 36rpx;
        text-align: center;
        background-color: #fc4e54;
        border-radius:50%;
    }
}
/***中间动画****/
#animation_view{
    margin-top:40rpx;
    position:relative;
    
    .shelves{
        position:absolute;
        width:370.4rpx;
        height:195.2rpx;
        left:189.8rpx;
        top:0rpx;
        opacity:0;
        animation:mymove0 1s 1;
        animation-fill-mode:forwards;
        
    }
    .left_style{
        position:absolute;
        top: 60rpx;
        left:0px;
        width:153.6rpx;
        height:308.8rpx;
        opacity:0;
        // animation-duration:1s;
        // animation-iteration-count:1;
        // animation-delay:0.5s;
        animation:mymove1 1s 1;
        animation-fill-mode:forwards;
    }
     .right_style{
        position:absolute;
        top: 162rpx;
        width:212.8rpx;
        height:316rpx;
        right:0rpx;
        opacity:0;
        animation-delay:0.5s;
        animation:mymove2 1.3s 1;
        animation-fill-mode:forwards;
    }
    .ercode_style{
        width:65.6rpx;
        height:19.2rpx;
        position:absolute;
        top: 257rpx;
        right:327rpx;
        opacity:0;
        animation:mymove4 0.3s 1;
        animation-delay:1.7s;
        animation-fill-mode:forwards;
    }
    .msg{
        font-size:28rpx;
        line-height:32rpx;
        color: #bbb;
        label{
            width:750rpx;
            position:absolute;
            display:block;
            text-align: center;
            top:450rpx;
            
        }
        
    }
}
@keyframes mymove0
{
   from {opacity:0;}
   to {opacity:1;}
}
@keyframes mymove1
{
   from {left:0rpx;opacity:0;}
   to {left:212.4rpx;opacity:1;}
}
@keyframes mymove2
{
   from {right:0rpx;opacity:0;}
   to {right:220rpx;opacity:1;}
}
@keyframes mymove4
{
   from {opacity:0;}
   to {opacity:1;}
}
/*****底部动画******/

#scanView2 {
    animation: sploosh 1s linear;
}

#scanView1 {
    animation: sploosh2 0.5s linear;
}

#scanView {
    animation: sploosh3 1s linear;
}

#scanView1,
#scanView2 {
    position: absolute;
    top: 50rpx;
    left: 50rpx;
    height: 300rpx;
    width: 300rpx;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    z-index: 10;
    animation-iteration-count: infinite;
    /*background: transparent;*/
}
#scanView{
    position: absolute;
    top: 50rpx;
    left: 50rpx;
    height: 300rpx;
    width: 300rpx;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    z-index: 10;
    background:-webkit-linear-gradient(#ffef00, #ffde00);
}
@keyframes sploosh {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 0);
    }
}

@keyframes sploosh2 {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 0.3);
    }
}
@keyframes sploosh3 {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);
        background: rgba(255, 220, 1, 0.7);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(255, 220, 1, 0);
        background: rgba(255, 220, 1, 1);
    }
}
